<template>
  <view class="root">
    <u-tabs class="tabs-style" bg-color="#fff" :list="list" lineColor="#2488F5" lineWidth="36rpx" :current="activeIndex"
      :activeStyle="{ color: '#2488F5' }" @click="tabsClick"></u-tabs>
    <view class="scroll-wrapper" v-show="activeIndex === 0">
      <yy-scroll-view ref="checkListRef" :auto-request="false" :request-url="FIND_AGENCY_PAGE"
        :static-params="{ checkType: 1}">
        <template slot-scope="{list}">
          <view class="scroll-item" v-for="(item, index) in list" :key="index">
            <image class="status" :src="baseImgUrl + 'nobag-icon1.png'" mode=""></image>
            <view class="name">{{item.companyMessageName}}</view>
            <view class="l-item">
              <view class="l-label">检查类型：</view>
              <view class="l-value">{{item.industryExamineName}}</view>
            </view>
            <view class="l-item">
              <view class="l-label">检查民/辅警：</view>
              <view class="l-value">{{item.policeUserName}}</view>
            </view>
            <u-line color="#DEDCDC"></u-line>
            <navigator :url="`/todoItem/checkDetails?taskId=${item.id}`">
              <view class="l-time">
                <view class="time">{{item.checkTime}}</view>
                <u-icon name="arrow-right" color="#DEDCDC"></u-icon>
              </view>
            </navigator>
          </view>
        </template>
      </yy-scroll-view>
    </view>
    <view class="scroll-wrapper" v-show="activeIndex === 1">
      <yy-scroll-view ref="recheckListRef" :auto-request="false" :request-url="FIND_AGENCY_PAGE"
        :static-params="{ checkType: 2}">
        <template slot-scope="{list}">
          <view class="scroll-item" v-for="(item, index) in list" :key="index">
            <image class="status" :src="baseImgUrl + 'nobag-icon1.png'" mode=""></image>
            <view class="name">{{item.companyMessageName}}</view>
            <view class="l-item">
              <view class="l-label">复查类型：</view>
              <view class="l-value">{{item.industryExamineName}}</view>
            </view>
            <view class="l-item">
              <view class="l-label">复查民/辅警：</view>
              <view class="l-value">{{item.policeUserName}}</view>
            </view>
            <u-line color="#DEDCDC"></u-line>
            <navigator :url="`/todoItem/recheckDetails?taskId=${item.id}`">
              <view class="l-time">
                <view class="time">{{item.checkTime}}</view>
                <u-icon name="arrow-right" color="#DEDCDC"></u-icon>
              </view>
            </navigator>
          </view>
        </template>
      </yy-scroll-view>
    </view>
    <view class="scroll-wrapper" v-show="activeIndex === 2">
      <yy-scroll-view ref="signedListRef" :auto-request="false" :request-url="WAIT_SIGN_PAGE">
        <template slot-scope="{list}">
          <view class="wrapper-item" v-for="(v, i) in list" :key="i">
            <view class="items" :data-url="`/selfInfo/liabilityStatement/liabilityDetails?data=${encodeURIComponent(
                JSON.stringify({ ...v, index: '0' })
              )}`" @click="liabilityHandle(v)">
              <view class="lt">
                <image :src="baseImgUrl + 'signPdf.png'" mode="aspectFill"></image>
              </view>
              <view class="rt">
                <view class="wrapper-facility">
                  <view class="facility-item">
                    <view class="line-hidden rtName">
                      {{ v.documentName }}
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">发布时间：</view>
                    <view class="value valueName">
                      {{ v.releaseTime }}
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">签署单位：</view>
                    <view class="value valueName">
                      {{ v.companyName || "" }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </yy-scroll-view>
    </view>
  </view>
</template>

<script>
  import {
    findAgencyCount,
    findWaitSignCount
  } from '../api/api';
  import {
    FIND_AGENCY_PAGE,
    FIND_TASK_PAGE,
    WAIT_SIGN_PAGE
  } from '@/api/api.js'

  export default {
    data() {
      return {
        activeIndex: 0,
        baseImgUrl: this.$baseImgUrl,
        list: [{
            name: " 检查不合格",
            badge: {
              value: 5,
            }
          }, {
            name: "复查不合格",
            badge: {
              isDot: false,
            },
          },
          {
            name: "待签署责任书",
            badge: {
              isDot: false,
            },
          }
        ],
        FIND_TASK_PAGE,
        WAIT_SIGN_PAGE,
        FIND_AGENCY_PAGE,
        badgeInfo: {}
      }
    },
    onShow() {
      this.initPage()
    },
    methods: {
      initPage() {
        findAgencyCount()
          .then((res) => {
            const result = res.result;
            const checkInfo = result.find((item) => item.checkType == 1)
            const recheckInfo = result.find((item) => item.checkType == 2)
            this.$set(this.list[0].badge, 'value', checkInfo.agencyCount)
            this.$set(this.list[1].badge, 'value', recheckInfo.agencyCount)
          })
        findWaitSignCount()
          .then((res) => {
            this.$set(this.list[2].badge, 'value', res.result.waitSignCount)
          })
        console.log(this.checkListRef)
        this.$refs.checkListRef.getList()
        this.$refs.recheckListRef.getList()
        this.$refs.signedListRef.getList()
      },
      tabsClick(item) {
        this.activeIndex = item.index;
      },
      liabilityHandle(v) {
        let data = {
          ...v,
          index: '0'
        };
        uni.setStorageSync("liabilityCurrent", data);
        uni.navigateTo({
          url: "/selfInfo/liabilityStatement/liabilityDetails",
        });
      },
    }
  }
</script>

<style lang="scss">
  page {
    background: #F9F9F9;
    width: 100%;
    height: 100%;
  }
</style>

<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    height: 100%;

    /deep/ .u-tabs {
      background: #fff;
    }

    .scroll-wrapper {
      flex: 1;
      padding: 16rpx;
      height: 0;

      .scroll-item {
        background: #FFFFFF;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 0 20rpx;
        position: relative;

        .name {
          font-weight: bold;
          font-size: 30rpx;
          color: #333333;
          padding-top: 32rpx;
          margin-bottom: 18rpx;
        }

        .l-item {
          display: flex;
          margin-bottom: 18rpx;

          .l-label {
            font-weight: 400;
            font-size: 26rpx;
            color: #A1A1A1;
          }

          .l-value {
            font-weight: 500;
            font-size: 28rpx;
            color: #666666;
          }
        }

        .l-time {
          display: flex;
          align-items: center;
          height: 94rpx;
          justify-content: space-between;

          .time {
            font-weight: 400;
            font-size: 26rpx;
            color: #A1A1A1;
          }
        }

        .status {
          width: 140rpx;
          height: 123rpx;
          position: absolute;
          top: 45rpx;
          right: 28rpx;
        }
      }

      .wrapper-item {
        background: #FFFFFF;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(180, 180, 180, 0.1608);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        display: flex;
        margin-bottom: 18rpx;
        padding: 18rpx 32rpx 27rpx 32rpx;

        .items {
          display: flex;

          .lt {
            width: 118rpx;
            height: 118rpx;
            margin-right: 12rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .facility-item {
            display: flex;

            &:last-child {
              margin: 0;
            }

            .rtName {
              font-weight: bold;
              font-size: 32rpx;
              color: #212020;
            }

            .label {
              font-weight: 400;
              font-size: 26rpx;
              color: #BBBBBB;
            }

            .value {
              font-weight: 500;
              font-size: 26rpx;
              color: #7F7E83;
            }
          }
        }

      }
    }
  }
</style>